<template>
  <div class="edit-node-dialog">
    <el-dialog :visible.sync="visible"
               :title="(dialogStatus === 'create' ? '新增' : '编辑')+'节点'"
               :close-on-click-modal="false"
               width="600px"
               @close="dialogClose">
      <el-form :model="editNodeForm"
               :rules="formRules"
               ref="editNodeForm"
               label-width="100px">
        <el-form-item label="节点名称"
                      prop="node_name">
          <el-input v-model="editNodeForm.node_name"
                    :placeholder="'请输入节点名称'">
          </el-input>
        </el-form-item>
        <el-form-item label="开始时间"
                      prop="start_time">
          <el-date-picker v-model="editNodeForm.start_time"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="选择开始时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间"
                      prop="end_time">
          <el-date-picker v-model="editNodeForm.end_time"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="选择开始时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="排序"
                      prop="order">
          <el-input-number v-model="editNodeForm.order"
                           placeholder=""></el-input-number>
        </el-form-item>
        <el-form-item label="节点状态"
                      prop="status">
          <el-radio-group v-model="editNodeForm.status">
            <el-radio-button label="0">未启动</el-radio-button>
            <el-radio-button label="1">进行中</el-radio-button>
            <el-radio-button label="2">已完成</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="节点图片"
                      prop="">
          <el-upload class="avatar-uploader"
                     action=""
                     :show-file-list="false"
                     :http-request="uploadNodePic">
            <img v-if="editNodeForm.node_pic"
                 :src="editNodeForm.node_pic"
                 class="avatar">
            <i v-else
               class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogClose">取 消</el-button>
        <el-button @click="editNode"
                   type="primary">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { UploadFileApi } from '@/services/UserPermission'
import { ImageProgressApi } from '@/services/WorkCenter'
import moment from 'moment'
export default {
  components: {

  },
  data () {
    return {
      visible: false,
      editNodeForm: {
        image_id: '',
        node_name: '',
        order: '',
        status: '',
        node_pic: '',
        start_time: '',
        end_time: ''
      },
      resetForm: {
        image_id: '',
        node_name: '',
        order: '',
        status: '',
        node_pic: '',
        start_time: '',
        end_time: ''
      },
      formRules: {
        node_name: [
          { required: true, message: '请输入节点名称', trigger: 'blur' }
        ],
        start_time: [
          { required: true, message: '请选择开始时间', trigger: 'blur' }
        ],
        end_time: [
          { required: true, message: '请选择结束时间', trigger: 'blur' }
        ],
        order: [
          { required: true, message: '请输入排序', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '请选择节点状态', trigger: 'blur' }
        ]
      }
    };
  },
  watch: {
    dialogVisible (newval) {
      this.visible = newval;
    },
    dialogForm: {
      handler (newval) {
        let temp = JSON.parse(JSON.stringify(newval));
        let reset = JSON.parse(JSON.stringify(this.resetForm))
        this.editNodeForm = Object.assign(reset, temp)
      },
      deep: true
    }
  },
  props: {
    dialogVisible: {
      type: Boolean
    },
    dialogStatus: {
      type: String,
      default: "create"
    },
    dialogForm: {
      type: Object
    },
    callback: {
      type: Function
    }
  },
  computed: {

  },
  methods: {
    // 上传节点图片
    uploadNodePic (file) {
      let formData = new FormData()
      formData.append('module', 'imageProgress')
      formData.append('pic_file_apk', file.file)
      UploadFileApi.uploadFile({
        data: formData
      }).then(res => {
        if (res.data) {
          this.$message.success('上传成功')
          this.editNodeForm.node_pic = res.data.file_path
        }
      })
    },
    editNode () {
      this.$refs.editNodeForm.validate((valid) => {
        if (valid) {
          if (moment(this.editNodeForm.end_time).isBefore(this.editNodeForm.start_time)) {
            this.$message.warning('结束时间不能早于开始时间')
            return
          }
          if (this.dialogStatus === 'create') {
            this.createNode()
          } else {
            this.updateNode()
          }
        }
      })
    },
    createNode () {
      ImageProgressApi.createNode({
        data: this.editNodeForm
      }).then(res => {
        if (res.code === 0) {
          this.$message.success('新增节点成功')
          this.dialogClose()
          this.$emit('callback', '')
        }
      })
    },
    updateNode () {
      ImageProgressApi.updateNode({
        data: this.editNodeForm
      }).then(res => {
        if (res.code === 0) {
          this.$message.success('修改节点成功')
          this.dialogClose()
          this.$emit('callback', '')
        }
      })
    },
    dialogClose () {
      this.$refs.editNodeForm.resetFields();
      this.$emit("update:dialogVisible", false);
    },
  },
  created () {

  },
  mounted () {

  },
};
</script>

<style scoped lang="scss">
.edit-node-dialog {
  /deep/ .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
</style>
